/** less 使用@width */
$width: 1920px;
$height: 1080px;
$height-title: 130px;
$margin: 20px;

.large-screen {
  position: relative;
  // width: $width;
  height: $height;
  background: url('@/assets/images/large-screen/bg.png') no-repeat;
  background-position: center;
  background-size: cover;
  .large-screen-title {
    position: relative;
    height: $height-title;
    line-height: 95px;
    background: url('@/assets/images/large-screen/title.png') no-repeat;
    background-position: center;
    background-size: 100%;
    text-align: center;
    .large-screen-text {
      font-size: 48px;
      font-weight: bold;
      background: linear-gradient(to bottom, white, #a0d8ff);
      /* 让渐变仅作用于文字 */
      -webkit-background-clip: text;
      background-clip: text;
      /* 文字透明，让背景渐变显示 */
      color: transparent;
      /* 添加阴影增强立体感 */
      /* text-shadow:
				0 2px 4px rgba(0, 0, 0, 0.2),
				0 4px 6px rgba(0, 0, 0, 0.1);
				*/
    }
    .large-screen-time {
      position: absolute;
      top: -10px;
      right: 20px;
      color: #fff;
      font-size: 24px;
    }
  }

  .large-screen-content {
    // overflow: hidden;
    position: relative;
    height: calc($height - $height-title - $margin);
    margin: 0 $margin $margin $margin;
    color: #fff;
  }

  .large-screen-tags {
    overflow: hidden;
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/large-screen/tags.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
    .large-screen-item {
      padding: 12px 20px;
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      // &:last-child {
      // 	padding-left: 12px;
      // }
      &:hover {
        background: url('@/assets/images/large-screen/tags-bg.png') no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
    }
    .large-screen-item-active {
      background: url('@/assets/images/large-screen/tags-bg.png') no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
  }
}
